<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
            <h2 id="jhi-contract-heading" jhiTranslate="contractApp.contract.home.createOrEditLabel">Create or edit a Contract</h2>
            <div>
                <jhi-alert-error></jhi-alert-error>
                <div class="form-group" [hidden]="!contract.id">
                    <label for="id" jhiTranslate="global.field.id">ID</label>
                    <input type="text" class="form-control" id="id" name="id"
                        [(ngModel)]="contract.id" readonly />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.serialNo" for="field_serialNo">Serial No</label>
                    <input type="text" class="form-control" name="serialNo" id="field_serialNo"
                        [(ngModel)]="contract.serialNo" required/>
                    <div [hidden]="!(editForm.controls.serialNo?.dirty && editForm.controls.serialNo?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.serialNo?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.name" for="field_name">Name</label>
                    <input type="text" class="form-control" name="name" id="field_name"
                        [(ngModel)]="contract.name" required/>
                    <div [hidden]="!(editForm.controls.name?.dirty && editForm.controls.name?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.name?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.projectInfo" for="field_projectInfo">Project Info</label>
                    <input type="text" class="form-control" name="projectInfo" id="field_projectInfo"
                        [(ngModel)]="contract.projectInfo" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.signDate" for="field_signDate">Sign Date</label>
                    <div class="input-group">
                        <input id="field_signDate" type="text" class="form-control" name="signDate" ngbDatepicker  #signDateDp="ngbDatepicker" [(ngModel)]="contract.signDate"
                        />
                        <span class="input-group-append">
                            <button type="button" class="btn btn-secondary" (click)="signDateDp.toggle()"><fa-icon [icon]="'calendar-alt'"></fa-icon></button>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.validDays" for="field_validDays">Valid Days</label>
                    <input type="text" class="form-control" name="validDays" id="field_validDays"
                        [(ngModel)]="contract.validDays" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.startDate" for="field_startDate">Start Date</label>
                    <div class="input-group">
                        <input id="field_startDate" type="text" class="form-control" name="startDate" ngbDatepicker  #startDateDp="ngbDatepicker" [(ngModel)]="contract.startDate"
                        />
                        <span class="input-group-append">
                            <button type="button" class="btn btn-secondary" (click)="startDateDp.toggle()"><fa-icon [icon]="'calendar-alt'"></fa-icon></button>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.endDate" for="field_endDate">End Date</label>
                    <div class="input-group">
                        <input id="field_endDate" type="text" class="form-control" name="endDate" ngbDatepicker  #endDateDp="ngbDatepicker" [(ngModel)]="contract.endDate"
                        />
                        <span class="input-group-append">
                            <button type="button" class="btn btn-secondary" (click)="endDateDp.toggle()"><fa-icon [icon]="'calendar-alt'"></fa-icon></button>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.totalMoney" for="field_totalMoney">Total Money</label>
                    <input type="number" class="form-control" name="totalMoney" id="field_totalMoney"
                        [(ngModel)]="contract.totalMoney" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.createdBy" for="field_createdBy">Created By</label>
                    <input type="text" class="form-control" name="createdBy" id="field_createdBy"
                        [(ngModel)]="contract.createdBy" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.createdDate" for="field_createdDate">Created Date</label>
                    <div class="input-group">
                        <input id="field_createdDate" type="text" class="form-control" name="createdDate" ngbDatepicker  #createdDateDp="ngbDatepicker" [(ngModel)]="contract.createdDate"
                        />
                        <span class="input-group-append">
                            <button type="button" class="btn btn-secondary" (click)="createdDateDp.toggle()"><fa-icon [icon]="'calendar-alt'"></fa-icon></button>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.lastModifiedBy" for="field_lastModifiedBy">Last Modified By</label>
                    <input type="text" class="form-control" name="lastModifiedBy" id="field_lastModifiedBy"
                        [(ngModel)]="contract.lastModifiedBy" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.lastModifiedDate" for="field_lastModifiedDate">Last Modified Date</label>
                    <div class="input-group">
                        <input id="field_lastModifiedDate" type="text" class="form-control" name="lastModifiedDate" ngbDatepicker  #lastModifiedDateDp="ngbDatepicker" [(ngModel)]="contract.lastModifiedDate"
                        />
                        <span class="input-group-append">
                            <button type="button" class="btn btn-secondary" (click)="lastModifiedDateDp.toggle()"><fa-icon [icon]="'calendar-alt'"></fa-icon></button>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.comment" for="field_comment">Comment</label>
                    <input type="text" class="form-control" name="comment" id="field_comment"
                        [(ngModel)]="contract.comment" />
                </div>

                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.category" for="field_category">Category</label>
                    <select class="form-control" id="field_category" name="category" [(ngModel)]="contract.category" >
                        <option [ngValue]="null"></option>
                        <option [ngValue]="categoryOption.id === contract.category?.id ? contract.category : categoryOption" *ngFor="let categoryOption of categories; trackBy: trackCategoryById">{{categoryOption.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="contractApp.contract.department" for="field_department">Department</label>
                    <select class="form-control" id="field_department" name="department" [(ngModel)]="contract.department" >
                        <option [ngValue]="null"></option>
                        <option [ngValue]="departmentOption.id === contract.department?.id ? contract.department : departmentOption" *ngFor="let departmentOption of departments; trackBy: trackDepartmentById">{{departmentOption.name}}</option>
                    </select>
                </div>
            </div>
            <div>
                <button type="button" id="cancel-save" class="btn btn-secondary"  (click)="previousState()">
                    <fa-icon [icon]="'ban'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
                </button>
                <button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
                    <fa-icon [icon]="'save'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
                </button>
            </div>
        </form>
    </div>
</div>
